@use '../Variables.scss';

#DialogComponent {
  .MuiDialog-paper {
    max-width: 60em;
    .MuiDialogContent-root {
      gap: 0.5em;
    }
  }
}

.MuiDialog-root {
  .MuiDialog-paper {
    .MuiDialogTitle-root {
      font-size: 1.2em;
      font-weight: bold;
      padding: 1.2em 1.2em 0 1.2em;
    }
    .MuiDialogContent-root {
      display: flex;
      flex-wrap: wrap;
      padding: 1.5em;
      .react-autosuggest__container {
        width: 100%;
        .MuiTextField-root {
          width: 100%;
        }
      }      
    }
    .MuiDialogActions-root {
      padding: 0;
      button {
        padding: 0.8em;
      }
    }
  }
}

.compact {
  #DialogComponent {
    .MuiDialog-paper {
      max-width: 60em;
    } 
  }
  .MuiDialog-container{
    .MuiDialogContent-root {
      padding: 1em;
      .MuiFormControl-root {
        label[data-shrink=false] {
          transform: translate(0.75em, 0.75em) scale(1);
        }
      }      
    }
    .MuiDialogActions-root {
      button {
        padding: 0.5em;
      }
    }
  }
}

.dark .MuiDialog-root .MuiDialog-paper .MuiDialogActions-root button {
  border-top: 1px solid Variables.$darker-grey;
  border-right: 1px solid Variables.$darker-grey;
}